<template>
<div class="page-container">
    <div>
        <!--工具栏-->
        <div class="toolbar">
            <el-form :inline="true" :model="filters" :size="size" ref="filters">
                <el-row class="search-input">
                    <el-form-item label="商品名称：">
                        <el-input v-model="filters.chineseName" clearable placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码：">
                        <el-input v-model="filters.code" clearable placeholder="商品编码"></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌：">
                        <el-select clearable v-model="filters.brandId" filterable placeholder="商品品牌" style="width:215px">
                            <el-option clearable v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品类型：">
                        <el-select v-model="filters.type" clearable filterable placeholder="商品类型" style="width:215px">
                            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="允许销售：">
                        <el-select clearable v-model="filters.canSale" filterable placeholder="允许销售：" style="width:215px">
                            <el-option v-for="item in isSaleOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row class="search-button">
                    <el-form-item>
                        <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage()" />
                    </el-form-item>
                    <el-form-item>
                        <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
                    </el-form-item>
                    <el-form-item>
                        <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd()" />
                    </el-form-item>
                    <el-form-item>
                        <kt-button label="批量新增商品" type="primary" @click="batchAddProduct" />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-s-shop" type="primary" @click="handleDistribution()">分配</el-button>
                    </el-form-item>
                </el-row>
                <el-row class="t_r button">
                    <el-form-item>
                        <el-button-group>
                            <el-button plain @click="handTabChange(1)" label="全部">全部</el-button>
                            <el-button plain @click="handTabChange(4)" label="预审核">预审核</el-button>
                            <el-button plain @click="handTabChange(6)" label="审核通过">审核通过</el-button>
                        </el-button-group>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <!--表格内容栏-->
        <cy-table :height="350" :content="pageResult" :columns="columns" 
        :totalSize="totalSize" @findPage="findPage" @handleEdit="handleEdit" 
        :showIsSaleOperation="true" :showLifeCycleOperation="true" v-loading="loading" 
        :showDeleteOperation="false" :showBatchDelete="false" @handleLifeCycle="handleLifeCycle" ref="CyTable" 
        :operationWidth="300" :btnList="btnList" @updateProductInfo="updateProductInfo"></cy-table>
    </div>
    <!--商品生命周期-->
    <el-dialog title="商品生命周期" width="40%" height="800px" :visible.sync="lifeCycleDialogVisible" :close-on-click-modal="false">
        <el-form :model="dataLifeCycleForm" label-width="100px" ref="dataLifeCycleForm" :size="size" :inline="true">
            <el-row class="searchDialog-input">
                <el-form-item label="ID：" prop="id" v-if="false">
                    <el-input v-model="dataLifeCycleForm.id" :disabled="true" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="生命周期：" prop="lifeCycle">
                    <el-select v-model="dataLifeCycleForm.lifeCycle" placeholder="生命周期">
                        <el-option v-for="item in lifeCycleOption" :key="item.key" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 40px;">
            <el-button :size="size" @click.native="lifeCycleDialogVisible = false">{{ $t("action.cancel") }}
            </el-button>
            <el-button :size="size" type="primary" @click.native="submitLifeCycleForm">
                {{
          $t("action.submit")
          }}
            </el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import CyTable from "@/views/Core/ProductTable";
import KtButton from "@/views/Core/KtButton";
export default {
    components: {
        CyTable,
        KtButton,
    },
    data() {
        return {
            loading: true,
            user: JSON.parse(localStorage.getItem("user")),
            dataLifeCycleForm: {
                id: "",
                lifeCycle: ""
            },
            lifeCycleDialogVisible: false, //商品生命周期
            lifeCycleOption: [{
                    key: "1",
                    value: "初始期"
                },
                {
                    key: "2",
                    value: "培养期"
                },
                {
                    key: "3",
                    value: "上升期"
                },
                {
                    key: "4",
                    value: "衰退期"
                },
                {
                    key: "5",
                    value: "清退期"
                },
                {
                    key: "6",
                    value: "屏蔽期"
                }
            ],
            isSaleOptions: [{
                key: 1,
                value: "是"
            }, {
                key: 0,
                value: "否"
            }],
            typeOptions: [{
                    value: 1,
                    label: "实体商品"
                },
                {
                    value: 2,
                    label: "虚拟商品"
                },
                {
                    value: 3,
                    label: "海淘商品"
                }
            ],
            size: "small",
            brandList: [],
            columns: [{
                    prop: "id",
                    label: "序号",
                    minWidth: 70
                },
                {
                    prop: "pictureUrl",
                    label: "主图",
                    minWidth: 100,
                    showImg: true
                },
                {
                    prop: "chineseName",
                    label: "商品名称",
                    minWidth: 100
                },
                {
                    prop: "typeOfProduct",
                    label: "商品形式",
                    minWidth: 100,
                    formatter: this.formatTypeOfProduct
                },
                {
                    prop: "code",
                    label: "商品编码",
                    minWidth: 120
                },
                {
                    prop: "salePriceWithTax",
                    label: "零售价",
                    minWidth: 100
                },
                {
                    prop: "name",
                    label: "商品品牌",
                    minWidth: 120
                },
                {
                    prop: "fullNamePath",
                    label: "商品类目",
                    minWidth: 120
                },
                {
                    prop: "status",
                    label: "审核状态",
                    minWidth: 120,
                    formatter: this.formatStatus
                },
                {
                    prop: "type",
                    label: "商品类型",
                    minWidth: 120,
                    formatter: this.formatType
                }
            ],
            btnList: [{
                customLabel: "提交",
                isShowMethod: 0,
                method: "updateProductInfo"
            }],
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            },
            pageResult: [],
            totalSize: 0,
            filters: {
                chineseName: "",
                code: "",
                thirdProductCode: "",
                brandId: "",
                categoryId: "",
                combineType: "",
                canSale: "",
                type: ""
            },
        };
    },
    methods: {
        // 分配
        handleDistribution() {
            this.$router.push({
                path: "/BusinessProductDistribution"
            });
        },
        //生命周期提交
        submitLifeCycleForm() {
            let this_ = this;
            this.$refs.dataLifeCycleForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        let params = Object.assign({}, this.dataLifeCycleForm);
                        this.utils.request.updateProductInfo(params, function (data) {
                            if (data.code == "0000") {
                                this_.$message({
                                    message: "操作成功",
                                    type: "success"
                                });
                                this_.lifeCycleDialogVisible = false;
                            } else {
                                this_.$message({
                                    message: "操作失败, " + data.msg,
                                    type: "error"
                                });
                            }
                            this_.findPage();
                        });
                    });
                }
            });
        },
        //生命周期
        handleLifeCycle: function (param) {
            this.lifeCycleDialogVisible = true;
            this.dataLifeCycleForm = {
                id: param.row.id,
                lifeCycle: param.row.lifeCycle.toString()
            };
        },
        //批量新增商品
        batchAddProduct: function () {
            this.$router.push({
                path: "/BatchAddProduct"
            });
        },
        // 获取分页数据
        findPage: function (params) {
            let this_ = this;
            if (params == undefined || params == null) {
                params = {
                    pageNum: this_.pageRequest.pageNum,
                    pageSize: this_.pageRequest.pageSize
                };
            }
            if (this_.filters == undefined || this_.filters == null) {
                this_.filters = {};
            }
            this_.filters.start = params.pageNum;
            this_.filters.limit = params.pageSize;
            this.utils.request.queryPageProductManagement(this_.filters, function (res) {
                if (res.code == "0000") {
                    this_.pageResult = res.data.rows;
                    this_.totalSize = Number(res.data.total);
                    this_.loading = false
                } else {
                    res.data.rows = [];
                }
            });
        },
        // 显示新增界面
        handleAdd: function (productId) {
            this.$router.push({
                path: "/ProductInfo/" + 0
            });
        },
        // 显示编辑界面
        handleEdit: function (params) {
            this.$router.push({
                path: "/ProductInfo/" + params.row.id
            });
        },
        // 修改商品信息
        updateProductInfo: function (params) {
            if (params.row.salePriceWithTax > 0) {
                let param = {
                    status: 2,
                    id: params.row.id
                };
                let this_ = this;
                this.utils.request.updateProductInfo(param, function (data) {
                    if (data.code == "0000") {
                        this_.$message({
                            message: "操作成功",
                            type: "success"
                        });
                        this_.findPage(1);
                    } else {
                        this_.$message({
                            message: "操作失败, " + res.msg,
                            type: "error"
                        });
                    }
                });
            } else {
                this.$message({
                    message: "请先填写商品售价",
                    type: "error"
                });
            }
        },
        formatType: function (row, column, cellValue, index) {
            if (cellValue === 1) {
                return "实体商品";
            } else if (cellValue === 2) {
                return "虚拟商品";
            } else if (cellValue === 3) {
                return "虚拟组合";
            } else if (cellValue === 4) {
                return "实物组合";
            }
        },
        canSale: function (row, column, cellValue, index) {
            if (cellValue == 0) {
                return "否";
            } else if (cellValue == 1) {
                return "是";
            }
        },
        formatStatus: function (row, column, cellValue, index) {
            if (cellValue == 0) {
                return "预审核";
            } else if (cellValue == 1) {
                return "待审核";
            } else if (cellValue == 2) {
                return "审核通过";
            } else if (cellValue == 3) {
                return "审核不通过";
            }
        },
        formatTypeOfProduct: function (row, column, cellValue, index) {
            if (cellValue == 1) {
                return "普通商品";
            } else if (cellValue == 2) {
                return "系类虚品";
            }
        },
        formatSource: function (row, column, cellValue, index) {
            if (cellValue == 1) {
                return "平台";
            } else if (cellValue == 2) {
                return "商家";
            }
        },
        resetForm(formName) {
            this.filters = {
                chineseName: "",
                code: "",
                thirdProductCode: "",
                brandId: "",
                categoryId: "",
                combineType: "",
                canSale: ""
            };
            this.findPage();
        },
        handTabChange(param) {
            if (param == 1) {
                this.filters.canSale = "";
                this.filters.status = "";
                this.findPage();
            } else if (param == 4) {
                this.filters.canSale = "";
                this.filters.status = "0";
                this.findPage();
            } else if (param == 6) {
                this.filters.canSale = "";
                this.filters.status = "2";
                this.findPage();
            }
        },
        //初始化页面数据
        queryProductBrand() {
            let _this = this
            if (_this.user.deptType == 0) {
                this.utils.request.queryProductBrand({}, function (data) {
                    if (data.data != null) {
                        _this.brandList = data.data
                    }
                })
            } else {
                this.utils.request.queryMerchantProductBrand({}, function (data) {
                    if (data.data != null) {
                        _this.brandList = data.data
                    }
                })
            }
        },
    },
    mounted() {
        this.queryProductBrand();
    }
};
</script>

<style scoped lang="scss">
</style>
